import React from 'react';
import { useLayoutEffect } from 'react';
import { StyleSheet, View, Text, FlatList, Image, TouchableOpacity } from 'react-native';
import '../global';
import { AntDesign } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';


const Btn = ({ style, font, children, ...rest }) => {
    return (
        <TouchableOpacity
            {...rest}
            style={
                [style,
                    { justifyContent: 'center', alignItems: 'center' }
                ]
            }
        >
            <Text style={font}>{children}</Text>
        </TouchableOpacity>
    )
}

const Efamily = ({ navigation }) => {
    useLayoutEffect(() => {
        navigation.setOptions({
            title: 'E族爱心',
            headerStyle: {
                backgroundColor: 'red',
            },
            headerTitleAlign: 'center',
            headerTintColor: '#fff',
            headerRight: () => {
                return <Feather name="more-horizontal" size={24} color="#fff" />
            },
            headerLeft: () => {
                return <AntDesign name="left" size={24} color="#fff"
                onPress={() => {
                  navigation.navigate('First');
                }}
                />
            },
        })
    }, [])
    return (
        <View style={styles.container}>
            <View style={styles.listBox}>
                <FlatList style={styles.list}
                    data={[
                        { key: require('../assets/HomeworkThree/lihuijuan1.png'), name: '受捐人：李惠娟' },
                        { key: require('../assets/HomeworkThree/lihuijuan2.png'), name: '受捐人：李惠娟' },
                        { key: require('../assets/HomeworkThree/lihuijuan3.png'), name: '受捐人：李惠娟' }
                    ]}
                    renderItem={({ item }) =>
                        <View style={styles.box}>
                            <Image style={styles.img} source={item.key} />
                            <View style={styles.textBox}>
                                <Text style={styles.text}>{item.name}</Text>
                            </View>
                        </View>
                    }
                />
                <FlatList style={styles.list}
                    data={[
                        { key: require('../assets/HomeworkThree/fangmengmeng1.png'), name: '受捐人：方梦梦' },
                        { key: require('../assets/HomeworkThree/fangmengmeng2.png'), name: '受捐人：方梦梦' },
                        { key: require('../assets/HomeworkThree/fangmengmeng3.png'), name: '受捐人：方梦梦' }
                    ]}
                    renderItem={({ item }) =>
                        <View style={styles.box}>
                            <Image style={styles.img} source={item.key} />
                            <View style={styles.textBox}>
                                <Text style={styles.text}>{item.name}</Text>
                            </View>
                        </View>
                    }
                />
            </View>
            <View style={styles.pageBox}>
                <Btn
                    style={styles.page}
                    font={{ color: '#fff', fontSize: 15 }}
                >
                    上一页
                </Btn>
                <Btn
                    style={styles.page}
                    font={{ color: '#fff', fontSize: 15 }}
                >
                    下一页
                </Btn>
            </View>
            <View style={styles.boxBtn}>
                <Btn
                    style={styles.btn}
                    font={{ color: '#fff', fontSize: 20 }}
                >
                    我要推荐
                </Btn>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#eee',
    },
    listBox: {
        flex: 1,
        flexDirection: 'row',
        height: 0.6 * h,
        backgroundColor: '#fff'
    },
    list: {
        flex: 1,
        flexDirection: 'row'
    },
    box: {
        width: 0.5 * w,
        height: 0.2 * h,
        justifyContent: 'center',
        alignItems: 'center',
    },
    img: {
        width: 0.2 * w,
        height: 0.2 * w,
        borderRadius: 0.1 * w,
        marginBottom: 0.05 * w,
    },
    textBox: {
        width: 0.2 * w,
        height: 0.06 * w,
        backgroundColor: '#f1b70a',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 0.01 * w,
    },
    text: {
        fontSize: 14,
        color: '#fff',
    },
    pageBox: {
        flexDirection: 'row',
        height: 0.1 * h,
        marginTop: 1,
        backgroundColor: '#fff',
        justifyContent: 'space-around',
        alignItems: 'center'
    },
    page: {
        width: 0.22 * w,
        height: 30,
        backgroundColor: 'red',
        borderRadius: 15
    },
    boxBtn: {
        height: 0.2 * h,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btn: {
        width: 0.8 * w,
        height: 50,
        backgroundColor: 'red',
        borderRadius: 10
    },
})

export default Efamily